<template>
   <div class="app-container">
      <el-row :gutter="20">
         <el-col :span="24">
            <!-- 头部输入框数据 -->
            <!-- <el-form :model="inpData" v-show="showSearch" :inline="true">
               <el-form-item label="任务名称">
                  <el-input v-model="inpData.taskName" placeholder="请输入任务名称" clearable style="width: 240px" />
               </el-form-item>
               <el-form-item label="任务编号">
                  <el-input v-model="inpData.taskNumber" placeholder="请输入任务编号" clearable style="width: 240px" />
               </el-form-item>
               <el-form-item label="任务状态">
                  <el-select placeholder="角色状态" clearable style="width: 240px">
                     <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                  </el-select>
               </el-form-item>
               <el-form-item label="创建时间" style="width: 308px;">
                  <el-date-picker value-format="YYYY-MM-DD" type="daterange" range-separator="-"
                     start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
               </el-form-item>
               <el-form-item>
                  <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
                  <el-button icon="Refresh" @click="handleReset">重置</el-button>
               </el-form-item>
            </el-form> -->
            <!-- 功能按钮 -->
            <el-row :gutter="10" class="mb8">
               <el-col :span="1.5">
                  <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:user:add']">新增
                  </el-button>
               </el-col>
               <!-- <el-col :span="1.5">
                  <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
                     v-hasPermi="['system:user:edit']">修改</el-button>
               </el-col>
               <el-col :span="1.5">
                  <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
                     v-hasPermi="['system:user:remove']">删除</el-button>
               </el-col> -->
               <!-- <el-col :span="1.5">
                  <el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['system:user:import']">
                     导入</el-button>
               </el-col>
               <el-col :span="1.5">
                  <el-button type="warning" plain icon="Download" @click="handleExport"
                     v-hasPermi="['system:user:export']">导出</el-button>
               </el-col> -->
               <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> -->
            </el-row>
            <!-- 表格数据 -->
            <el-table v-loading="loading" :data="addData" @selection-change="handleSelectionChange">
               <el-table-column type="selection" width="50" align="center" />
               <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" />
               <el-table-column label="手机号码" align="center" key="phone" prop="userPhone" />
               <el-table-column label="用户角色" align="center" prop="userRole" :show-overflow-tooltip="true" />
               <el-table-column label="地址" align="center" prop="address" :show-overflow-tooltip="true" />
               <el-table-column label="店铺名称" align="center" prop="shopName" :show-overflow-tooltip="true" />
               <el-table-column label="服务区域" align="center" prop="serviceArea" :show-overflow-tooltip="true" />
               <el-table-column label="年龄" align="center" prop="age" :show-overflow-tooltip="true" />
               <el-table-column label="性别" align="center" key="7" prop="sex">
                  <template #default="scope">
                     <el-tag v-if="scope.row.sex === 'Male'">男性</el-tag>
                     <el-tag v-else type="danger">女性</el-tag>
                  </template>
               </el-table-column>
               <el-table-column label="工作时长" align="center" prop="workHours" :show-overflow-tooltip="true" />
               <!-- 厂家:manufacturers 团长:organizer 手工者:craftsmen -->
               <el-table-column label="用户审核角色" align="center" prop="auditRole" :show-overflow-tooltip="true">
                  <template #default="scope">
                     <el-tag v-if="scope.row.userState === 'manufacturers'" type="danger">厂家</el-tag>
                     <el-tag v-else-if="scope.row.userState === 'organizer'" type="warning">团长</el-tag>
                     <el-tag type="info" v-else>手工者</el-tag>
                  </template>
               </el-table-column>
               <!-- 审核通过:Pass-1 审核失败:Lose-2 审核中:Audit-0 -->
               <el-table-column label="用户状态" align="state" key="userState">
                  <template #default="scope">
                     <el-tag v-if="scope.row.userState === 'Pass'" type="success">审核通过</el-tag>
                     <el-tag v-else-if="scope.row.userState === 'Lose'" type="danger">审核失败</el-tag>
                     <el-tag v-else>审核中</el-tag>
                  </template>
               </el-table-column>
               <el-table-column label="创建时间" align="center" prop="creationTime" width="160">
                  <template #default="scope">
                     <span>{{ parseTime(scope.row.creationTime) }}</span>
                  </template>
               </el-table-column>

            </el-table>

            <pagination v-show="total > 0" :total="Number(total)" v-model:page="addData.skipCount"
               v-model:limit="addData.maxResultCount" @pagination="getList" />
         </el-col>
      </el-row>

      <!-- 添加或修改用户配置对话框 -->
      <el-dialog :title="title" v-model="open" width="600px" append-to-body>
         <el-form :model="modalData" :rules="rules" v-show="showSearch" :inline="true">
            <!-- 用户名称 -->
            <el-form-item label="用户名称" prop="userName">
               <el-input v-model="modalData.userName" placeholder="请输入用户名称" clearable style="width: 160px" />
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
               <el-input v-model="modalData.phone" placeholder="请输入手机号码" clearable style="width: 160px" />
            </el-form-item>
            <el-form-item label="用户角色" prop="userRole">
               <el-select v-model="value" placeholder="请选择角色" style="width: 160px">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
            </el-form-item>
            <el-form-item label="用户年龄">
               <el-input v-model="modalData.age" placeholder="请输入用户年龄" clearable style="width: 160px" />
            </el-form-item>
            <el-form-item label="店铺地址" prop="address">
               <el-input v-model="modalData.address" placeholder="请输入店铺地址" clearable style="width: 160px" />
            </el-form-item>
            <el-form-item label="店铺名称" prop="shopName">
               <el-input v-model="modalData.shopName" placeholder="请输入店铺名称" clearable style="width: 160px" />
            </el-form-item>

            <el-form-item label="用户性别">
               <el-input v-model="modalData.sex" placeholder="请输入用户性别" clearable style="width: 160px" />
            </el-form-item>
            <el-form-item label="工作时长">
               <el-input v-model="modalData.workHours" placeholder="请输入工作时长" clearable style="width: 160px" />
            </el-form-item>
            <el-form-item label="用户状态">
               <el-select placeholder="请选择用户状态" clearable style="width: 240px">
                  <el-option label="审核通过" value="1"></el-option>
                  <el-option label="审核失败" value="2"></el-option>
                  <el-option label="审核中" value="0"></el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="创建时间" style="width: 308px;">
               <el-date-picker value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期"
                  end-placeholder="结束日期"></el-date-picker>
            </el-form-item>

         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm">确 定</el-button>
               <el-button @click="cancel">取 消</el-button>
            </div>
         </template>
      </el-dialog>

      <!-- 用户导入对话框 -->
      <!--  
      <el-dialog style="display:none;" width="400px" append-to-body>
         <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url"
            :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
            :auto-upload="false" drag>
            <el-icon class="el-icon--upload">
               <upload-filled />
            </el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <template #tip>
               <div class="el-upload__tip text-center">
                  <div class="el-upload__tip">
                     <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
                  </div>
                  <span>仅允许导入xls、xlsx格式文件。</span>
                  <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                     @click="importTemplate">下载模板</el-link>
               </div>
            </template>
         </el-upload>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitFileForm">确 定</el-button>
               <el-button @click="upload.open = false">取 消</el-button>
            </div>
         </template>
      </el-dialog>
      -->
   </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getUserList, addUser } from '@/api/user/request';
const options = [
   {
      value: '100',
      label: '游客',
   },
   {
      value: '200',
      label: '厂家',
   },
   {
      value: '300',
      label: '团长',
   },
   {
      value: '400',
      label: '手工者',
   }
]
// 进入页面就获取表格数据
onMounted(() => {
   getList();
});
// 头部表单内容 将来进行搜索操作的时候传递给后端
const inpData = ref(
   [{
      // 任务名称
      taskName: '',
      // 任务编号
      taskNumber: '',
      // 状态
      status: '',
      // 日期范围
      dateRange: []
   }
   ]);
// 声明表格数据
const addData = ref([]);
// 模态框数据 将来进行添加或修改操作的时候传递给后端 
const modalData = ref([{
   // 用户名称
   userName: '',
   // 手机号码
   phone: '',
   // 用户角色
   userRole: '',
   // 年龄
   age: '',
   // 店铺地址
   address: '',
   // 店铺名称
   shopName: '',
   // 性别 
   sex: '',
   // 工作时长
   workHours: '',
   // 状态
   status: '',
   // 创建时间
   createTime: [],
}
]);
// 获取表格数据
const getList = async () => {
   const res = await getUserList();
   total.value = res.data.totalCount;
   addData.value = res.data.items;

};
// 新增用户方法
const addUserFn = async () => {
   const res = await addUser(modalData.value);
   console.log(res, '新增用户');

}

const title = ref('添加任务');

// 控制是否显示模态框
const open = ref(false);
// 加载效果 
const loading = ref(false);
// 控制是否显示 工具栏
const showSearch = ref(true);
// 选择的数据
const ids = ref([]);
const single = ref();
const multiple = ref([]);
// 总数
const total = ref();
/** 点击新增按钮 */
function handleAdd() {
   open.value = true;
   title.value = "添加角色";
}

//表单校验规则

const rules = {
   userName: [{ required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
   phone: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
   address: [{ required: true, message: "店铺地址不能为空", trigger: "blur" }, { trigger: "blur" }],
   shopName: [{ required: true, message: "店铺名称不能为空", trigger: "blur" }],
   userRole: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],

}


/** 搜索按钮操作 收集头部输入框的数据 传给后端进行搜索 重新获取数据 */
function handleSearch() {
   console.log(inpData.value, '搜索');
};
/** 重置按钮操作 将表单数据清空恢复成初始状态 重新获取数据*/
function handleReset() {
   console.log('重置');
};

/** 选择条数  */
function handleSelectionChange(selection) {
   ids.value = selection.map(item => item.id);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
};

/** 模态框的取消按钮 */
function cancel() {
   open.value = false;
};

/** 模态框的确定按钮  */
function submitForm() {
   console.log('确定');
   open.value = false;
   // 收集模态框输入框的数据 传给后端进行添加
   addUserFn();
   // 重新获取数据
   getList();
};
/** 用户状态修改  */
function handleStatusChange(row) {
   console.log(row.state);

};
</script>
